<!-- // 添加图纸页 -->
<template>
    <div>
        <el-card>
            <template #header>
                <span class="title-span">API基础信息</span>
            </template>
            <el-form label-width="100">
                <el-form-item label="节点名称：">
                    <el-input v-model="props.showFlowData.data.label"></el-input>
                </el-form-item>
                <el-form-item label="描述：">
                    <el-input v-model="props.showFlowData.data.desc" type="textarea"></el-input>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API状态</span>
            </template>
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIState.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIState.type" disabled></el-input>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API输入</span>
            </template>
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataOne.name" disabled />
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataOne.type" disabled />
                </el-form-item>
                <el-form-item label="图页名称：">
                    <el-input v-model="popShowData.APIInput.dataOne.drawingName" />
                </el-form-item>
            </el-form>
            <el-divider />
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataTwo.name" disabled />
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataTwo.type" disabled />
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataTwo.selectValue" @change="handleSelectChangeDocument">
                        <el-option v-for="(item, index) in drawing_documents_selectList" :key="index"
                            :label="item.data.label" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataThree.name" disabled />
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataThree.type" disabled />
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataThree.selectValue">
                        <el-option v-for="(item, index) in sheet_size_list" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataFour.name" disabled />
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataFour.type" disabled />
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataFour.selectValue">
                        <el-option label="横向" value="Landscape"></el-option>
                        <el-option label="纵向" value="Portrait"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataFive.name" disabled />
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataFive.type" disabled />
                </el-form-item>
                <el-form-item label="值：">
                    <el-input v-model="popShowData.APIInput.dataFive.value"></el-input>
                </el-form-item>
            </el-form>
            <el-divider />
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataSix.name" disabled />
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataSix.type" disabled />
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataSix.selectValue">
                        <el-option label="第一视角" value="1"></el-option>
                        <el-option label="第三视角" value="3"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API输出</span>
            </template>
            <div v-for="(item, index) in APIOutput" :key="index">
                <el-form label-width="100">
                    <el-form-item label="名称：">
                        <el-input v-model="item.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="类型：">
                        <el-input v-model="item.type" disabled></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>

    </div>
</template>

<script setup>
import { ref, defineProps, onMounted, watch } from 'vue';
import flowNodesStore from '@/store/modules/flowNodes'
const { proxy } = getCurrentInstance();
const flowNodes = flowNodesStore()
const standard_list = ref(flowNodes.getStandardList())
const sheet_size_list = ref([])
const props = defineProps({
    // Define props here
    showFlowData: {
        type: Object,
    },
    drawer: {
        type: Boolean,
    },
    recapture: {
        type: Boolean
    },
    inputSelectNodeIds: {
        type: Array
    }
});



const drawing_documents_selectList = computed(() =>
    flowNodes.getFlowNodes()
        .filter(node => props.inputSelectNodeIds.includes(node.id) && node.data?.methodName === 'createDrawing')
        .map(node => {
            const newNode = JSON.parse(JSON.stringify(node));
            const label = newNode.data?.label;
            if (typeof label === 'string') {
                newNode.data.label = `${label}-图纸页`;
            }
            return newNode;
        })
);

const popShowData = ref({
    APIBaseData: {
        name: '添加图纸页',
        desc: '基于图纸文件和图纸页，添加一张新的图纸页',
    },
    APIState: {
        name: '成功',
        type: '布尔'
    },
    APIInput: {
        dataOne: {
            name: '图纸页名称',
            type: '文本',
            drawingName: '',
        },
        dataTwo: {
            name: '图纸文件',
            type: '2D文档',
            selectValue: '',
        },
        dataThree: {
            name: '图幅尺寸',
            type: '枚举',
            selectValue: '',
        },
        dataFour: {
            name: '图纸方向',
            type: '枚举',
            selectValue: '',
        },
        dataFive: {
            name: '视图比例',
            type: '文本',
            value: '',
        },
        dataSix: {
            name: '投影视角',
            type: '枚举',
            selectValue: '',
        },
    },
})

const node_data = computed(() => {
    let obj = {
        positionFlag: props.showFlowData.data.positionFlag,
        methodName: props.showFlowData.data.methodName,
        // 图纸名称
        sheetName: popShowData.value.APIInput.dataOne.drawingName,
        // 图纸文件
        input2DData: popShowData.value.APIInput.dataTwo.selectValue,
        // 图幅尺寸
        sheetSize: popShowData.value.APIInput.dataThree.selectValue,
        // 图纸方向
        sheetOrientation: popShowData.value.APIInput.dataFour.selectValue,
        // 视图比例
        sheetScale: popShowData.value.APIInput.dataFive.value,
        // 投影视角
        projectionMethod: popShowData.value.APIInput.dataSix.selectValue,
    }
    return obj;
});

const APIOutput = computed(() => {
    const allCheckLists = [{
        name: '新图纸页',
        type: '图页',
    }];
    return allCheckLists;
});

// watch(() => props.drawer, (val) => {
//     if (!val) {
//         setData();// 更新数据
//     }
// }, { deep: true }, { immediate: true })

watch(() => popShowData.value, (val) => {
    if (val) {
        setData();// 更新数据
    }
}, { deep: true }, { immediate: true })

watch(() => props.recapture, (val) => {
    reset();
    getList();
}, { deep: true }, { immediate: true })


watch(() => APIOutput.value, (val) => {
    popShowData.value.APIOutput = val
})
onMounted(() => {
    getList();
    setData();
})

const getList = () => {
    if (props.showFlowData.id) {
        if (flowNodes.getFlowNodesById(props.showFlowData.id)) {
            let nodeData = flowNodes.getFlowNodesById(props.showFlowData.id);
            if (nodeData.data.popShowData) {
                popShowData.value = JSON.parse(JSON.stringify(nodeData.data.popShowData))

                if (popShowData.value.APIInput.dataTwo.selectValue) {
                    handleSelectChangeDocument(popShowData.value.APIInput.dataTwo.selectValue)
                }
            }
        }
    }
}

const setData = () => {
    let nodeData = flowNodes.getFlowNodesById(props.showFlowData.id);
    // 如果找到了该节点，则更新数据
    if (nodeData) {
        nodeData.data.popShowData = popShowData.value
        nodeData.data.data = node_data.value
        flowNodes.setFlowNodesById(props.showFlowData.id, nodeData)
    }
}

const reset = () => {
    popShowData.value = {
        APIBaseData: {
            name: '添加图纸页',
            desc: '基于图纸文件和图纸页，添加一张新的图纸页',
        },
        APIState: {
            name: '成功',
            type: '布尔'
        },
        APIInput: {
            dataOne: {
                name: '图纸页名称',
                type: '文本',
                drawingName: '',
            },
            dataTwo: {
                name: '图纸文件',
                type: '2D文档',
                selectValue: '',
            },
            dataThree: {
                name: '图幅尺寸',
                type: '枚举',
                selectValue: '',
            },
            dataFour: {
                name: '图纸方向',
                type: '枚举',
                selectValue: '',
            },
            dataFive: {
                name: '视图比例',
                type: '文本',
                value: '',
            },
            dataSix: {
                name: '投影视角',
                type: '枚举',
                selectValue: '',
            },
        },
        APIOutput: [],
    }
}

const handleSelectChangeDocument = (val) => {
    let document_obj = drawing_documents_selectList.value.find(item => item.id === val);

    if (document_obj.data.popShowData) {
        let find_obj = standard_list.value.find(item => item.id == document_obj.data.popShowData.APIInput.dataOne.selectValue);
        if(find_obj) {
            sheet_size_list.value = find_obj.sheetSize.split(',');
        }

        // find_obj.sheetSize.split(',').forEach(item => {
        //     let selection_obj = {
        //         label: item,
        //     }
        //     sheet_size_list.value.push(selection_obj);
        // });
        // find_obj.componetName.split(',').forEach((item, index) => {
        //     sheet_size_list.value[index].value = item;
        // });
    }
}
</script>

<style scoped>
.checkbox-item-sty {
    display: block;
}

::v-deep .el-checkbox__label {
    font-size: 16px;
    /* 你可以根据需要调整字体大小 */
}
</style>